<!DOCTYPE html>
<html>
<head>
	<title>表钟</title>
	<style>
		body {
			background-color: #f2f2f2;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		canvas {
			background-color: #f2f2f2;
			border-radius: 50%;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
		}
		.loading {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 6px;
            font-size: 20px;
            user-select: none;
        }
	</style>
</head>
<body>
	<div id="loading" class="loading">正在加载...</div>
	<canvas id="clock" width="200" height="200">
	</canvas>
	<script>
		const loading = document.querySelector('.loading');
		const canvas = document.getElementById('clock');
		const ctx = canvas.getContext('2d');
		let radius = canvas.height / 2;

		ctx.translate(radius, radius);
		radius *= 0.9;

		setInterval(drawClock, 1000);

		function drawClock() {
			canvas.style.display = 'none';
			drawFace(ctx, radius);
			drawNumbers(ctx, radius);
			drawTime(ctx, radius);
			loading.style.display = 'none'
			canvas.style.display = 'block';
		}

		function drawFace(ctx, radius) {
			let grad;
			ctx.beginPath();
			ctx.arc(0, 0, radius, 0, 2*Math.PI);
			ctx.fillStyle = 'white';
			ctx.fill();
			grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
			grad.addColorStop(0, '#333');
			grad.addColorStop(0.5, 'white');
			grad.addColorStop(1, '#333');
			ctx.strokeStyle = grad;
			ctx.lineWidth = radius*0.1;
			ctx.stroke();
			ctx.beginPath();
			ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
			ctx.fillStyle = '#333';
			ctx.fill();
		}

		function drawNumbers(ctx, radius) {
			let ang;
			let num;
			ctx.font = radius*0.15 + "px arial";
			ctx.textBaseline="middle";
			ctx.textAlign="center";
			for(num = 1; num < 13; num++){
				ang = num * Math.PI / 6;
				ctx.rotate(ang);
				ctx.translate(0, -radius*0.85);
				ctx.rotate(-ang);
				ctx.fillText(num.toString(), 0, 0);
				ctx.rotate(ang);
				ctx.translate(0, radius*0.85);
				ctx.rotate(-ang);
			}
		}

		function drawTime(ctx, radius){
			const now = new Date();
			let hour = now.getHours();
			let minute = now.getMinutes();
			let second = now.getSeconds();
			// hour
			hour=hour%12;
			hour=(hour*Math.PI/6)+
			(minute*Math.PI/(6*60))+
			(second*Math.PI/(360*60));
			drawHand(ctx, hour, radius*0.5, radius*0.07);
			// minute
			minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
			drawHand(ctx, minute, radius*0.8, radius*0.07);
			// second
			second=(second*Math.PI/30);
			drawHand(ctx, second, radius*0.9, radius*0.02);
		}

		function drawHand(ctx, pos, length, width) {
			ctx.beginPath();
			ctx.lineWidth = width;
			ctx.lineCap = "round";
			ctx.moveTo(0,0);
			ctx.rotate(pos);
			ctx.lineTo(0, -length);
			ctx.stroke();
			ctx.rotate(-pos);
		}
	</script>
</body>
</html>
